<html>
<head>
  <title>Notebook</title>
  <!-- Icons & Stylesheets -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
  <script src="vue.js"></script>
  <script src="http://lib.baomitu.com/marked/3.0.8/marked.js"></script>
  <script src="https://unpkg.com/moment"></script>
</head>
<body>
  <div id="notebook">
    <aside class="side-bar">
      <div class="toolbar">
        <button v-on:click="addNote()" :title="notes.length+' note(s) already'"><i class="material-icons">add</i> Add Note</button>
      </div> 

      <div class="notes">
        <div  class= "note" :class="{selected: note === selectedNote}" v-for="note in sortedNotes" @click="selectNote(note)"><i class="icon material-icons" v-if="note.favorite">star</i>{{note.title}}</div>
      </div>
    </aside>

    <!-- Main pane -->
    <section class="main" v-if="selectedNote">
      <div>
        <input type="text" v-model= "selectedNote.title" placeholder="note title" />
        <button title="favorite note" @click="favoriteNote()"><i class="material-icons">{{selectedNote.favorite ? 'star' : 'star_border'}}</i></button>
        <button title="Remove note" @click="removeNote()"><i class="material-icons">delete</i></button><!--保存功能-->
        
      </div>
      <textarea v-model="selectedNote.content"></textarea>
      <div class="toolbar status-bar">
        <span class="date">
          <span class="label">Created</span>
          <span class="value">{{ selectedNote.created | date }}</span><!--清除-->
        </span>

        <span class="lines">
          <span class="label">Lines</span>
          <span class="value">{{ linesCount }}</span>
        </span>

        <span class="words">
          <span class="label">Words</span>
          <span class="value">{{ wordsCount }}</span><!--标题-->
        </span>

        <span class="characters">
          <span class="label">Characters</span>
          <span class="value">{{ charactersCount }}</span>
        </span>
      </div>
    </section>

    <!-- Preview pane -->
    <aside class="preview" v-if="selectedNote" v-html="notePreview">

    {{ notePreview }}

    </aside>

  </div>

  <!-- Some JavaScript -->
  <script src="script.js"></script>
</body>
</html>
